<template>
  <div class="input-range">
    <span class="input-range-label">{{ label }}</span>
    <el-input
      size="small"
      v-model="value[0]"
      @input="handleInput(0)"
      @blur="handleBlur(0)"
      class="input-range__input"
    ></el-input>
    <span class="input-range-split">~</span>
    <el-input
      size="small"
      v-model="value[1]"
      @input="handleInput(1)"
      @blur="handleBlur(1)"
      class="input-range__input"
    ></el-input>
    <span class="input-range-unit">{{ unit }}</span>
  </div>
</template>

<script>
export default {
  model: {
    prop: "value",
    event: "change",
  },
  props: {
    value: {
      type: Array,
      default: ["", ""],
    },
    label: {
      type: String,
      default: "",
    },
    unit: {
      type: String,
      default: "",
    },
  },
  data() {
    return {
      leftValue: "",
    };
  },
  methods: {
    handleInput() {
      this.$emit("change", Object.assign([], this.value));
    },
    handleBlur(idx) {
      let begin = this.value[0] || "";
      let end = this.value[1] || "";
      begin = +begin;
      end = +end;
      if (
        [undefined, null, ""].indexOf(this.value[0]) == -1 &&
        [undefined, null, ""].indexOf(this.value[1]) == -1
      ) {
        if (idx == 0 && end < begin) {
          this.value[1] = this.value[0];
        } else if (idx == 1 && begin > end) {
          this.value[0] = this.value[1];
        }
      }

      this.$emit("change", Object.assign([], this.value));
    },
  },
};
</script>

<style lang="scss" scoped>
.input-range {
  display: inline-flex;
  font-size: 13px;
  color: #333;
  align-items: center;
  &-label {
    margin-right: 5px;
  }
  &-unit {
    margin-left: 5px;
  }
  &__input {
    width: 100px;
  }
  &-split {
    margin: 0 5px;
  }
}
</style>